<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="guide">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>书籍审核</el-breadcrumb-item>
        <el-breadcrumb-item
          ><span class="guanli" @click="bookManagement"
            >书籍管理</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ book.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 表格区域  -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="编号" width="150" sortable>
      </el-table-column>
      <el-table-column :label="book.title">
        <el-table-column prop="chapter" label="章节序号" width="120" sortable>
        </el-table-column>
        <el-table-column prop="content" label="章节内容">
          <template slot-scope="scope">
            <bookContent :text="scope.row.content" :words ="words"></bookContent>
          </template>
        </el-table-column>
        <el-table-column
          prop="keywords"
          label="命中关键词个数"
          width="120"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >提交修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"        
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageParam.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import bookContent from "./bookContent";
export default {
  name: "ContentReview",
  components: {
    bookContent,
  },
  props: {
    book: {
      type: Object,
      default: null,
    },
    bookIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      contentReview: [],
      pageParam: {
        pageNumber: 1,
        pageSize: 10,
        total:10
      },
      label: "这个保镖有点邪",
      highlight: true,
      words: [],
    };
  },
  mounted() {   
    this.getKeywords();
    this.logBookData();
  },
  methods: {
    //获取关键词库
    async getKeywords(){
      const { data } = await this.$axios.get("/getKeywords");      
      let newData = data.data;
      let wordsData=[]
      newData.forEach(item=>{
        wordsData.push(item.keywords)
      })      
      this.words = wordsData;
      // console.log(this.words);
    },
    // 加载数据
    logBookData() {
      this.$axios
        .get("/contentReview").then((res) => {
          // this.tableData = res.data;
          let bookshen = res.data.filter((book) => {
            return book.id == this.book.id;
          });
          let books = bookshen[0].children;
          
          let bookdatas = [];
          books.forEach((book) => {
            let bookdata = {};
            bookdata.number = book.number;
            bookdata.chapter = book.chapter;
            bookdata.content = book.content;
            bookdata.keywords = this.highLightKeyword(book.content, this.words);
            bookdatas.push(bookdata);
          });
          this.pageParam.total = books.length;
          this.tableData = bookdatas;
        });
    },

    highLightKeyword(text, words) {
      let i,
        len = words.length,
        num = 0,
        re;
      for (i = 0; i < len; i++) {
        // 正则匹配所有的文本
        re = new RegExp(words[i], "g");
        if (re.test(text)) {
          num = num + text.match(re).length;
        }
      }
      return num;
    },

    //表格删除编辑方法
    handleEdit(index, row) {
      console.log(index, row);
      this.highlight = !this.highlight;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //分页方法
    //每页数据量发生变化时触发的事件
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageParam.pageSize = pageSize;
      //this.logBookData();
    },
    //当前数据分页组件页码发生变化时触发的事件
    handleCurrentChange(val) {
      console.log(val);
      this.pageParam.pageNumber = val;
      //this.logBookData();
    },
    bookManagement() {
      this.$emit("bookemty", this.book);
    },
  },
};
</script>
<style lang="less">
.guide {
  margin-bottom: 20px;
  .guanli {
    cursor: pointer;
    font-weight: bold;
  }
  .guanli:hover {
    color: #409eff;
  }
}
</style>